<template>
  <!-- 圆盘 -->
  <div class="disc-wrap">
    <div class="disc">
      <div class="inner"></div>
      <div class="outer"></div>
      <div class="conent">
        <!-- 左下 -->
        <div class="item1">
          <div class="icon1"></div>
          <div class="title1">
            <span class="point"></span>
            <span class="text">内部贸易公司</span>
            <span class="point"></span>
          </div>
        </div>
        <!-- 左上 -->
        <div class="item2">
          <div class="icon2"></div>
          <div class="title2">
            <span class="point"></span>
            <span class="text">外部卖家</span>
            <span class="point"></span>
          </div>
        </div>
        <!-- 右下 -->
        <div class="item3">
          <div class="icon3"></div>
          <div class="title3">
            <span class="point"></span>
            <span class="text">内部项目</span>
            <span class="point"></span>
          </div>
        </div>
        <!-- 右上 -->
        <div class="item4">
          <div class="icon4"></div>
          <div class="title4">
            <span class="point"></span>
            <span class="text">外部材料供应商</span>
            <span class="point"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped lang='scss'>
.disc-wrap {
  width: 100%;
  height: 578px;
  position: relative;
  box-sizing: border-box;
  .disc {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: translateY(39px) scale(1.4);
    .text{
      font-size: 18px;
    }
    .inner {
      position: absolute;
      width: 680px;
      height: 680px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background: url("@/assets/longscreen2/in.png");
      background-size: 108% 108%;
      background-position: center center;
      animation: rotate-in 70s linear infinite;
      transform: rotateX(65deg);
      @keyframes rotate-in {
        0% {
          transform: rotateX(65deg) rotateZ(0deg);
        }
        100% {
          transform: rotateX(65deg) rotateZ(360deg);
        }
      }
    }
    .outer {
      position: absolute;
      width: 680px;
      height: 680px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background: url("@/assets/longscreen2/out.png");
      background-size: 100% 100%;
      background-position: center center;
      animation: rotate-out 70s linear infinite;
      transform: rotateX(65deg);
      @keyframes rotate-out {
        0% {
          transform: rotateX(65deg) rotateZ(100deg);
        }
        100% {
          transform: rotateX(65deg) rotateZ(-360deg);
        }
      }
    }
    .conent {
      position: absolute;
      left: 50%;
      top: 192px;
      width: 177px;
      height: 190px;
      transform: translateX(-50%);
      background: url("@/assets/longscreen2/mall_content.png");
      background-position: center center;
      background-size: 100% 100%;
      z-index: 3;
      @keyframes moveDown {
        0%,
        100% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-20px);
        }
      }
      @keyframes moveUp {
        0%,
        100% {
          transform: translateY(-20px);
        }

        50% {
          transform: translateY(0);
        }
      }
      .item1 {
        width: 180px;
        height: 180px;
        top: 76px;
        left: -220px;
        position: absolute;
        background-image: url("@/assets/longscreen2/圆柱底座.png");
        background-size: 100% 100%;

        .icon1 {
          width: 100px;
          height: 100px;
          position: absolute;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 60% 60%;
          left: 36px;
          top: -19px;
          background-image: url("@/assets/longscreen2/mall_内部贸易公司.svg");
          z-index: 2;
          animation: moveUp 4s ease-in-out infinite;
        }
        .title1 {
          width: 158px;
          height: 44px;
          color: #e1e9e9;
          position: absolute;
          top: 30px;
          left: -98px;
          background-image: url("@/assets/longscreen2/mall_title.png");
          background-size: 100% 99%;
          z-index: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          .text {
            padding: 0 10px;
          }
          .point {
            display: block;
            width: 4px;
            height: 4px;
            background: #c2fefa;
            margin-top: 2px;
          }
        }
      }
      // 左上
      .item2 {
        width: 180px;
        height: 180px;
        background-image: url("@/assets/longscreen2/六边形底座.png");
        background-size: 100% 100%;
        top: -123px;
        left: -177px;
        position: absolute;
        .icon2 {
          width: 100px;
          height: 100px;
          position: absolute;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 60% 60%;
          left: 41px;
          top: -19px;
          background-image: url("@/assets/longscreen2/mall_外部卖家.svg");
          z-index: 2;
          animation: moveDown 4s ease-in-out infinite;
        }

        .title2 {
          width: 158px;
          height: 44px;
          color: #e1e9e9;
          position: absolute;
          top: 30px;
          left: -98px;
          background-image: url("@/assets/longscreen2/mall_title.png");
          background-size: 100% 99%;
          z-index: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          .text {
            padding: 0 10px;
          }
          .point {
            display: block;
            width: 4px;
            height: 4px;
            background: #c2fefa;
            margin-top: 2px;
          }
        }
      }
      //右下
      .item3 {
        width: 180px;
        height: 180px;
        background-image: url("@/assets/longscreen2/方形底座.png");
        background-size: 100% 100%;
        top: 76px;
        left: 220px;
        position: absolute;
        .title3 {
          width: 158px;
          height: 44px;
          color: #e1e9e9;
          position: absolute;
          top: 30px;
          right: -92px;
          background-image: url("@/assets/longscreen2/mall_title.png");
          background-size: 100% 99%;
          z-index: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          .text {
            padding: 0 10px;
          }
          .point {
            display: block;
            width: 4px;
            height: 4px;
            background: #c2fefa;
            margin-top: 2px;
          }
        }
        .icon3 {
          width: 100px;
          height: 100px;
          position: absolute;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 60% 60%;
          left: 40px;
          top: -24px;
          background-image: url("@/assets/longscreen2/mall_内部项目.svg");
          z-index: 2;
          animation: moveDown 4s ease-in-out infinite;
        }
      }
      // 右上
      .item4 {
        width: 180px;
        height: 180px;
        background-image: url("@/assets/longscreen2/圆柱底座.png");
        background-size: 100% 100%;
        top: -123px;
        left: 177px;
        position: absolute;
        .icon4 {
          width: 100px;
          height: 100px;
          position: absolute;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 60% 60%;
          right: 41px;
          top: -19px;
          background-image: url("@/assets/longscreen2/mall_外部材料供应商.svg");
          z-index: 2;
          animation: moveUp 4s ease-in-out infinite;
        }
        .title4 {
          width: 158px;
          height: 44px;
          color: #e1e9e9;
          position: absolute;
          top: 30px;
          right: -106px;
          background-image: url("@/assets/longscreen2/mall_title.png");
          background-size: 100% 99%;
          z-index: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          .text {
            padding: 0 10px;
          }
          .point {
            display: block;
            width: 4px;
            height: 4px;
            background: #c2fefa;
            margin-top: 2px;
          }
        }
      }
    }
  }
}
</style>